        * {
            margin: 0;
            padding: 0;
        }
        
        html,
        body {
            height: 100%;
            width: 100%;
        }
        
        body {
            background: #006600;
        }
        
        .container {
            position: absolute;
            width: 250px;
            height: 250px;
            margin: auto;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
             -webkit-perspective: 1000;
        }
        
        .box {
            position: relative;
            width: 100%;
            height: 100%;
            -webkit-transform-style: preserve-3d;
            -webkit-perspective-origin: 50% 50%;
           
           animation: move3D 5s infinite;
            -moz-animation: move3D 5s infinite;
            /* Firefox */
            -webkit-animation: move3D 5s infinite;
            /* Safari 和 Chrome */
            -o-animation: move3D 5s infinite;
            -webkit-transform: translateZ(-100px) rotateY(0deg);
           
        }
        
        .box > div {
            position: absolute;
            width: 200px;
            height: 200px;
            background-repeat: no-repeat;
        }
        
        .front {
            background-image: url("../img/1.jpg");
            -webkit-transform: rotateY(0deg) translateZ(100px);
        }
        
        .back {
            background-image: url("../img/2.jpg");
            -webkit-transform: rotateY(180deg) translateZ(100px);
        }
        
        .right {
            background-image: url("../img/3.jpg");
             -webkit-transform: rotateY(90deg) translateZ(100px);
        }
        
        .left {
            background-image: url("../img/4.jpg");
             -webkit-transform: rotateY(-90deg) translateZ(100px);
        }
        
        .top {
            background-image: url("../img/5.jpg");
            -webkit-transform: rotateX(90deg) translateZ(100px);
        }
        
        .bottom {
            background-image: url("../img/6.jpg");
            -webkit-transform: rotateX(-90deg) translateZ(100px);
        }
        
        @keyframes move3D {
            0% {
                -webkit-transform: translateZ(-100px) rotateY(0deg);
            }
            20% {
                -webkit-transform: translateZ(-100px) rotateX(-180deg);
            }
            40% {
                -webkit-transform: translateZ(-100px) rotateY(-90deg);
            }
            60% {
               -webkit-transform: translateZ(-100px) rotateY(90deg);
            }
            80% {
               -webkit-transform: translateZ(-100px) rotateX(-90deg);
            }
            100% {
               -webkit-transform: translateZ(-100px) rotateX(90deg); 
            }
           
        }
        
        @-moz-keyframes move3D {

            0% {
                -webkit-transform: translateZ(-100px) rotateY(0deg);
            }
            20% {
                -webkit-transform: translateZ(-100px) rotateX(-180deg);
            }
            40% {
                -webkit-transform: translateZ(-100px) rotateY(-90deg);
            }
            60% {
               -webkit-transform: translateZ(-100px) rotateY(90deg);
            }
            80% {
               -webkit-transform: translateZ(-100px) rotateX(-90deg);
            }
            100% {
               -webkit-transform: translateZ(-100px) rotateX(90deg); 
            }
        }
        
        @-webkit-keyframes move3D {
            0% {
                -webkit-transform: translateZ(-100px) rotateY(0deg);
            }
            20% {
                -webkit-transform: translateZ(-100px) rotateX(-180deg);
            }
            40% {
                -webkit-transform: translateZ(-100px) rotateY(-90deg);
            }
            60% {
               -webkit-transform: translateZ(-100px) rotateY(90deg);
            }
            80% {
               -webkit-transform: translateZ(-100px) rotateX(-90deg);
            }
            100% {
               -webkit-transform: translateZ(-100px) rotateX(90deg); 
            }
        }
        
        @-o-keyframes move3D {
            0% {
                -webkit-transform: translateZ(-100px) rotateY(0deg);
            }
            20% {
                -webkit-transform: translateZ(-100px) rotateX(-180deg);
            }
            40% {
                -webkit-transform: translateZ(-100px) rotateY(-90deg);
            }
            60% {
               -webkit-transform: translateZ(-100px) rotateY(90deg);
            }
            80% {
               -webkit-transform: translateZ(-100px) rotateX(-90deg);
            }
            100% {
               -webkit-transform: translateZ(-100px) rotateX(90deg); 
            }
        }
